<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--显示模式 block :块级元素;
    inline-block:行内块;
    inline:内联
    行内元素:
    -->
    <span style="width: 1000px;background-color: skyblue;">123</span>
    <br/><div style="width: 1000px; background-color: tomato;">123</div>
    <span>213</span>
    <img src="../czh/1.png" alt="我裂开" style="width: 100px;
    height: 100px;">

<!--表单的基本结构
get/post curd
get --一般用于查看
post --一般用于新注册用户
-->
    <form action="https://baidu.com" method="post">
    <br/><input type="text" name="username">
    <!--用户名-->

    <br/><input type="password" name="pwd">
    <!--密码-->

    <br/><input type="submit" value="提交">
    <!--提交-->
</form>
<form action="https://baidu.com"  method="post">
    <br/><input type="text" value="用户名" readonly>请输入你想的内容
    <br/><input type="password" maxlength="3" placeholder="请输入密码，不要超过3位数">
   
    <!--数字框-->
    <br/><input type="number" min="1" max="100" step="10">
   
    <!--单选框-->
    <br/><input type="radio" name="sex" value="male">男
    <br/><input type="radio" name="sex" value="male">女

    <!--多选框-->
    <br/><input type="checkbox" name="hobby" value="lol">联盟
    <br/><input type="checkbox" name="hobby" value="呼呼大睡">睡死
    <br/><input type="checkbox" name="hobby" value="嘎嘎打游戏">上分

    <!-- label标签 -->
    <br/><label><input type="radio" name="sex" value="male">男</label>
    <br/><label><input type="radio" name="sex" value="male">女</label>

    <!-- 文件域-->
    <br/><input type="file"> 

    <!-- 按钮 
    submit 提交:将表单中的数据发送给后台
    reset 重置：清空所有数据，恢复默认状态
    button 普通按钮:需要用户通过js定义功能
    -->
    <br/><input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="button" value="普通的按钮">
    
</form>
</body>
</html>